(function () {
    'use strict';
    var myChart = echarts.init(document.getElementById('data-content-line'));

    // 初始化图表配置
    function initChart(data) {
        var option = {
            tooltip: {
                trigger: 'axis',
                textStyle: {
                    fontSize: 14
                }
            },
            legend: {
                data: ['车速', '车流量'],
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                },
                top: '3%'
            },
            xAxis: {
                type: 'category',
                data: data.times,
                axisLabel: {
                    rotate: 40,
                    fontSize: 14,
                    color: '#fff'
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    inside: true
                }
            },
            yAxis: [
                {
                    type: 'value',
                    name: '车速(km/h)',
                    nameTextStyle: {
                        color: '#52d2ff',
                        fontSize: 14
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    axisTick: {
                        inside: true
                    },
                    axisLabel: {
                        color: '#fff'
                    }
                },
                {
                    type: 'value',
                    name: '流量(辆/小时)',
                    nameTextStyle: {
                        color: '#52d2ff',
                        fontSize: 14
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    axisTick: {
                        inside: true
                    },
                    axisLabel: {
                        color: '#fff'
                    }
                }
            ],
            series: [
                {
                    name: '车速',
                    type: 'line',
                    data: data.speed,
                    smooth: true,
                    lineStyle: {
                        color: '#5ba3ed'
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#5ba3ed'
                            }, {
                                offset: 1,
                                color: 'rgba(91,163,237,0.1)'
                            }]
                        }
                    },
                    itemStyle: {
                        color: '#5ba3ed'
                    }
                },
                {
                    name: '车流量',
                    type: 'line',
                    yAxisIndex: 1,
                    data: data.flow,
                    smooth: true,
                    lineStyle: {
                        color: '#a0fffe'
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: '#a0fffe'
                            }, {
                                offset: 1,
                                color: 'rgba(160,255,254,0.1)'
                            }]
                        }
                    },
                    itemStyle: {
                        color: '#a0fffe'
                    }
                }
            ],
            grid: {
                left: '12%',
                right: '12%',
                bottom: '15%',
                top: '12%',
                containLabel: true
            }
        };

        myChart.setOption(option);
        setTimeout(() => {
            myChart.resize();
        }, 100);
    }

    // 从后端获取数据并更新图表
    function updateChart() {
        fetch('http://localhost:5000/history')
            .then(response => response.json())
            .then(data => {
                initChart(data);
            })
            .catch(error => console.error('获取历史数据失败:', error));
    }

    // 首次加载
    updateChart();

    // 窗口大小改变时调整图表
    window.addEventListener('resize', function () {
        myChart.resize();
    });

    // 导出查询按钮点击事件
    document.querySelector('.query .button').addEventListener('click', function() {
        updateChart();
    });

    // 监听模态框显示事件
    document.getElementById('triggerBtn').addEventListener('click', function() {
        setTimeout(() => {
            myChart.resize();
        }, 300);
    });
})();